<template>
	<view class="indexContainer">
		<view class="header">
			<swiper  class="topswiper"  :indicator-dots="true" :autoplay="true" :interval="3000"  	indicator-color='white' :duration="1000">
				<swiper-item v-for="(banner,index) in bannerUrls" :key="banner.id">
					<view class="swiper-item">
						<image  class="swiperImg" :src="banner.url" mode=""></image>
					</view>
				</swiper-item>
				
			
			</swiper>
		</view>
		
		<view class="iconwrapper">
			<view class="iconinfo" v-for="(icon,index) in homeNav" :key="icon.id">
				<image  class="iconImg" :src="icon.imgUrl" mode=""></image>
				<text class="iconTitle">{{icon.navTitle}}</text>
			</view>
		
		</view>
		
		<view class="hotSellwrapper">
			<view class="hotSellInfo">
				<text class="hotSellText">热销车型</text>
			</view>
		</view>
		
		<scroll-view  class="scrollMain" scroll-x="true" enable-flex>
			<view class="fixBox">  
				<text class="textContent">新车上市</text>
			</view>
			<view class="scrollWrap"  v-for="(carItem,index) in hotProducts" :key="carItem.productId">
				<image  class="scrollImg" :src="carItem.imgUrl" mode=""></image>
				<view class="scrollItem" :style="{backgroundImage: 'url('+imageURL+')'}">
					<view class="infoBox">
						<text class="topText">{{carItem.productName}}</text>
						<text class="guidePrice">指导价</text>
						<text class="priceNum">{{carItem.carPrice}}</text>
						
					</view>
				</view>
			</view>
			
			<view class="lookMore">
				<text class="lookText">查看更多</text>
			</view>
		</scroll-view>
		
		<Scrollnav ></Scrollnav>
		
		<view class="toSeeMore">
			<text class="toSeeMoreText">查看更多></text>
		</view>
			
		<view class="explainVideo"> 
			<text class="explainText">精彩哈弗</text>
		</view>
		
		<view class="videoContainer">
			<video  class="videobox" src="http://1258960627.vod2.myqcloud.com/29a846b0vodcq1258960627/49bea7935285890806733932466/5zxXRvlRheEA.mp4" controls></video>
		</view>
	</view>
</template>

<script>
	import Scrollnav from  '../components/scrollnav/index.vue'
	import {mapGetters,mapState} from 'vuex'
	export default {
		components:{
			Scrollnav
			},
		 data(){
			 return {
				 imageURL:'../../static/images/card_bg.png'
			 }
		 },
		 mounted(){
			this.$store.dispatch('getIndexData')
			
		 },
		
		 computed:{
			 ...mapGetters(['bannerUrls','hotProducts']),
			 ...mapState({
				 homeNav:state=>state.home.homeNav
			 })
		 }
		 
	
	}
</script>

<style lang="stylus">
	.indexContainer
		width 100% 
		height  100%
		.header
			.topswiper 
				width 100%
				height 800rpx
				.swiper-item 
					width 100%
					height 800rpx
					.swiperImg
						width 100%
						height 100%
		.iconwrapper
			width 100%
			height 200rpx
			display  flex
			
			justify-content space-around
			.iconinfo
				width 100rpx
				height 100%
				display flex
				flex-direction column
				justify-content center
				align-items center
				.iconImg
					width 80rpx
					height 80rpx
				.iconTitle 
					font-size 25rpx
		.hotSellwrapper
			width 100%
			height 112rpx
			.hotSellInfo
				width 100%
				margin 0 auto
				.hotSellText
					margin-left 20rpx
					font-size 50rpx
					font-weight 600
		.scrollMain
			position relative
			width 100%
			height 300rpx
			display flex
			flex-shrink 0
			.fixBox 
				position absolute
				top -2rpx
				left 350rpx
				width 122rpx
				height 36rpx
				.textContent	
					float right
					width 112rpx
					height 32rpx
					line-height 32rpx
					text-align center
					background-color #E73F3F
					color #fff
					border-radius 16rpx 16rpx 16rpx 0
					font-size 22rpx	
			.scrollWrap
				display flex
				flex-shrink 0
				position relative
				width 432rpx 
				height 300rpx
				margin-left 30rpx
				box-sizing border-box
				.scrollImg
					width 300rpx
					height 180rpx
					position absolute
					top -15rpx
					left 50rpx
					z-index 999
				.scrollItem
					position absolute
					 bottom 0
					width 432rpx
					height 246rpx
					background-size cover
					border-radius 24rpx
					border 1rpx solid #aaa
					box-sizing border-box
					padding 0 30rpx
					padding-top 112rpx
					.infoBox
						width 368rpx
						height 120rpx
						.topText
							display block
							margin 0 auto
							font-size 32rpx
							font-weight 500
							color #666
							margin-bottom 20rpx
						.guidePrice
							font-size 26rpx
							color #656566
							line-height 40rpx
						.priceNum
							font-size 48rpx
							color #c4101c
							font-weight 500
							line-height 40rpx
						
			.lookMore
				flex-shrink 0
				width 246rpx
				height 246rpx
				line-height 246rpx
				text-align center
				background-color #ece7e7
				box-sizing border-box
				border-radius 24rpx
				margin 60rpx 30rpx 0
				.lookText
					font-size 28rpx
					color #303133
		.toSeeMore	
			width 100%
			height 28rpx
			line-height 28rpx
			text-align center
			margin-top 6rpx
			.toSeeMoreText
				font-size 26rpx
				color #97939c
		.explainVideo 
			margin-top 12rpx
			margin-left 30rpx
			.explainText
				font-size 36rpx
				font-weight 600
		.videoContainer
			width 690rpx
			height 400rpx
			margin 0 auto
			margin-top 20rpx
			margin-bottom 40rpx
			.videobox
				width 690rpx
				height 400rpx
				border-radius 20rpx
			
			
</style>
